<template>
	<view class="cu-modal goUser" :class="modalName=='userModal'?'show':''" >
		<view class="cu-dialog" @click.stop.prevent="stopPrevent">
			<view class="cu-bar bg-white justify-end">
				<view class="reg-content">完善个人信息</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="cu-bar text-left solid-top">
				<view class="margin-sm text-red">
					您的信息还未补充完整，完整的个人信息能提高您投递职位的成功率
				</view>


			</view>
			<view class="cu-bar solid-top" @click.stop.prevent="stopPrevent">
				<button class="uInfo action-btn" @click="goPage">完善信息</button>

				<button class="payed action-btn" @tap="hideModal">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'goUser',
		data() {
			return {
				transform: 'translateY(50vh)',
				timer: 0,
				backgroundColor: 'rgba(0,0,0,0)',
				show: false,
				name:'',
				phone:'',
				code:'',
				modalName:'',
				config: {},
				userInfo:{},
				index: -1,
				picker: ['男', '女'],
				date: '2002',
				area_id: '',
			};
		},
		props:{
			contentHeight:{
				type: Number,
				default: 0
			},
			//是否是tabbar页面
			hasTabbar:{
				type: Boolean,
				default: false
			},
		},
		created() {
			const height = uni.upx2px(this.contentHeight) + 'px';
			this.config = {
				height: height,
				transform: `translateY(${height})`,
				backgroundColor: 'rgba(0,0,0,.4)',
			}
			this.transform = this.config.transform;
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo)
		},
		methods:{
			goPage(){
				this.hideModal();
				uni.navigateTo({
					url: `/pages/tabbar/tabbar-4/userInfo`
				})
			},
			async apply(){
				let job = uni.getStorageSync('job')
				this.userInfo = uni.getStorageSync('userInfo');
				let param = {
					job_id:job.id,
					seeker_id:this.userInfo.id,
					company_id:job.company_id
				};

				let data = await this.$http.post(
					'wx/new_apply', //可以直接放链接(将不启用全局定义域名)
					param,
				);
				uni.showToast({
					title:'操作成功',
					icon:'none',
				})
				this.$emit('eventUser');
				this.hideModal();
			},
			toggleMask(){
				// console.log(this.buyItem)
				//防止高频点击
				if(this.timer == 1){
					return;
				}
				this.timer = 1;
				setTimeout(()=>{
					this.timer = 0;
				}, 500)

				if(this.show){
					this.transform = this.config.transform;
					this.backgroundColor = 'rgba(0,0,0,0)';
					setTimeout(()=>{
						this.show = false;
						this.hasTabbar && uni.showTabBar();
					}, 200)
					return;
				}

				this.show = true;
				//等待mask重绘完成执行
				if(this.hasTabbar){
					uni.hideTabBar({
						success: () => {
							setTimeout(()=>{
								this.backgroundColor = this.config.backgroundColor;
								this.transform = 'translateY(0px)';
							}, 10)
						}
					});
				}else{
					setTimeout(()=>{
						this.backgroundColor = this.config.backgroundColor;
						this.transform = 'translateY(0px)';
					}, 10)
				}
			},
			//防止冒泡和滚动穿透
			stopPrevent(){},
			showModal(modalName) {
				this.modalName = modalName
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

<style lang='scss'>
  .goUser{
    .reg-content{
      position: absolute;
      text-align: center;
      width: calc(100% - 340rpx);
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      height: 60rpx;
      font-size: 32rpx;
      line-height: 60rpx;
      cursor: none;
      pointer-events: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .cu-dialog{
      background: #FFFFFF;
      .cu-bar{
        margin-top: 0!important;
        display: flex !important;
        .content{
          width:100%;
          height: 50px;
        }
      }
    }
    .action-btn{
      height: 35px;
      padding: 5px 0;
      margin-top: 5px;
      width: 150px;
      background:#FE7D4C;
      border-radius: 4rem;
      font-size:16px;
      line-height: 28px;
      color:white;
    }
    .payed{
      background:#FC7A7A;
      box-shadow: 0px 3px 6px #FC7A7A;
    }
    .uInfo{
      background:#4CA5FE;
      box-shadow: 0px 3px 6px #4CA5FE;
    }
  }

</style>
